<template>
  <q-page class="approve-page column no-wrap" style="background-color: #fff; color: #222">
    <section class="q-px-md">
      <div class="text-center q-pt-lg" style="color: #fff; font-weight: bold; font-size: 20px">
        为您匹配了通过率较高的服务机构
      </div>
      <div class="flex items-center justify-center q-mt-sm">
        <q-icon name="south" size="xs" style="color: #fff" />
        <div style="color: #fff">
          <span>请确认以下申请信息</span>
        </div>
        <q-icon name="south" size="xs" style="color: #fff" />
      </div>
      <div class="q-px-xl q-mx-md q-mt-md">
        <q-img src="~/assets/images/approve/img1.png" :ratio="404 / 282" no-spinner />
      </div>
      <div class="" style="height: 20px"></div>
    </section>
    <section class="q-px-md q-pt-lg flex-1 no-wrap box-content" >
      <div class="box-bg" style="padding: 12px;border-radius: 8px;">
        <div class="flex items-center">
          <div
            v-if="data?.dataInfo.compantLogo"
            class="center overflow-hidden"
            style="border-radius: 8px; margin-right: 6px"
          >
            <q-img
              :src="data.dataInfo.compantLogo"
              :ratio="1"
              width="26px"
              height="26px"
              no-spinner
              no-transition
            />
          </div>
          <div style="font-size: 15px; font-weight: bold;" class="text-line"><span>{{ data?.dataInfo.compantName ?? '' }}</span></div>
        </div>
        <div
          class="q-mt-sm overflow-hidden"
          style="border-radius: 12px; font-size: 13px"
        >
          <div class="flex items-center">
            <div style="color: #666666">机构名称：</div>
            <div style="font-weight: bold">{{ data?.dataInfo.compantName ?? '' }}</div>
          </div>
          <div class="flex items-center q-mt-sm">
            <div style="color: #666666">主营业务：</div>
            <div style="font-weight: bold">信用贷款</div>
            <!-- <div style="font-weight: bold">{{ data?.dataInfo.compantTitle ?? '' }}</div> -->
          </div>
          <div class="flex items-center q-mt-sm">
            <div style="color: #666666">最低月利率：</div>
            <div style="font-weight: bold; color: #FFAD13">{{ data?.dataInfo.minRate ?? '' }}%</div>
          </div>
        </div>
      </div>

      <div class=" q-mt-md box-tag" style="background: #FFF4E7; border-radius: 12px; padding: 10px">
        <div
          class="flex items-center justify-between q-px-md box-py box-item box-item1"
        >
          <div style="color: #fff; font-weight: bold; font-size: 16px">在线申请</div>
          <div class="center box-img"><img :src="iconTopPng1" style="width: 35px;" /></div>
        </div>
        <div
          class="flex items-center justify-between q-px-md box-py box-item box-item2"
        >
          <div style="color: #fff; font-weight: bold; font-size: 16px">电话初审</div>
          <div class="center box-img"><img :src="iconTopPng2" style="width: 35px;" /></div>
        </div>
        <div
          class="flex items-center justify-between q-px-md box-py box-item box-item1"
        >
          <div style="color: #fff; font-weight: bold; font-size: 16px">线下签约</div>
          <div class="center box-img"><img :src="iconTopPng3" style="width: 35px;" /></div>
        </div>
        <div
          class="flex items-center justify-between q-px-md box-py box-item box-item2"
        >
          <div style="color: #fff; font-weight: bold; font-size: 16px">审批贷款</div>
          <div class="center box-img"><img :src="iconTopPng4" style="width: 35px;" /></div>
        </div>
      </div>

      <div class="box-white-r1 q-mt-md" style="padding: 10px">
        <div class="content">
          <div class="flex items-center">
            <div style="font-size: 17px; font-weight: bold" class="text-line"><span>业务知情同意书</span></div>
          </div>

          <div style="background-color: #FFE3C3; border-radius: 10px; margin-top: 12px" class="q-pa-xs flex">
            <div
              class="center flex-1 q-py-sm"
              style="width: 10px; border-radius: 8px 0 0 8px; font-size: 14px"
              :style="isPlatformProtocol ? { backgroundColor: '#fff', color: '#000' } : {}"
              @click="isPlatformProtocol = true"
            >
              个人-平台授权协议
            </div>
            <div
              class="center flex-1"
              style="width: 10px; border-radius: 0px 8px 8px 0px; font-size: 14px"
              :style="!isPlatformProtocol ? { backgroundColor: '#fff', color: '#000' } : {}"
              @click="isPlatformProtocol = false"
            >
              个人-机构授权协议
            </div>
          </div>

          <div style="font-size: 13px; margin-top: 10px; min-height: 150px" class="q-mb-sm">
            <iframe
              v-if="data && isPlatformProtocol"
              scrolling="yes"
              :src="data.ownerProtocolUrl"
              frameborder="0"
              style="display: block; width: 100%; height: 150px"
            ></iframe>
            <div v-if="data && !isPlatformProtocol" class="full-height overflow-hidden">
              <q-tabs
                v-model="protocolTabs"
                narrow-indicator
                :ripple="false"
                v-if="isArray(data.otherProtocolUrl) && data.otherProtocolUrl.length > 1"
                dense
                align="justify"
                style="color: #096aff; margin-top: -5px"
              >
                <q-tab
                  v-for="(item, index) in data.otherProtocolUrl"
                  :ripple="false"
                  :name="`${index}`"
                  :label="item.protocolName"
                />
              </q-tabs>
              <div :class="{ 'q-mt-sm': isArray(data.otherProtocolUrl) && data.otherProtocolUrl.length > 1 }">
                <div
                  v-for="(urlitem, index) in isArray(data.otherProtocolUrl)
                    ? data.otherProtocolUrl
                    : [data.otherProtocolUrl]"
                >
                  <iframe
                    v-if="index === +protocolTabs"
                    scrolling="yes"
                    :src="urlitem.protocolUrl"
                    frameborder="0"
                    style="display: block; width: 100%; height: 150px"
                  ></iframe>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="box-white-r2 q-mt-md" style="padding: 10px">
        <div class="content">
          <div class="flex items-center">
            <div style="font-size: 17px; font-weight: bold" class="text-line"><span>重要提示</span></div>
          </div>
          <div
            style=" margin-top: 8px"
            class="flex"
          >
            立即提交前，您已同意并知晓广告方将您的授权信息共亨至我方平台，并仔细阅读我方平台的协议内容；确认提交后，即代表您已授权并同意我方根据您的信息内容共享至为您提供贷款咨询服务的机构。
          </div>
        </div>
      </div>

      <div style="height: 120px"></div>

      <div
        style="bottom: 0; background-color: #fff; z-index: 10; left: 0;  border-top: 1px solid #d4d4d4d4;"
        class="fixed flex justify-center full-width q-py-lg"
      >
        <q-btn
          unelevated
          rounded
          padding="none none"
          @click="submitHandler"
          class="submit-btn q-mx-auto q-mx-auto"
          style=""
        >
          同意协议并提交
          <div class="pointer">
            <div class="white-point">
              <div class="white-point-in"></div>
            </div>
            <img src="~/assets/images/public/pointer.png" style="display: block; width: 45px" />
          </div>
        </q-btn>
      </div>
    </section>
  </q-page>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import iconTopPng1 from 'src/assets/images/approve/icon-top1.png';
import iconTopPng2 from 'src/assets/images/approve/icon-top2.png';
import iconTopPng3 from 'src/assets/images/approve/icon-top3.png';
import iconTopPng4 from 'src/assets/images/approve/icon-top4.png';
import { ref, watch } from 'vue';
import { useMechanismStore } from 'src/stores/mechanism-store';
import { approveToPushApi, getOrderInfoApi } from 'src/api/source';
import { showLoadingToast } from 'vant';
import { isArray } from 'lodash';

const route = useRoute();
const router = useRouter();
const resultNoURI = route.query.orderNo as string | undefined;

const { orderId } = useMechanismStore();

const isPlatformProtocol = ref(true);

const resultNo = ref(resultNoURI || orderId);

const protocolTabs = ref('0');

type OrderRes = {
  resultNo: string;
  otherProtocolUrl: {
    protocolUrl: string
    protocolName: string
  }[];
  orderNo: string;
  dataInfo: {
    compantTitle: string;
    compantSubTitle: string;
    maxLoanAmount: string;
    compantName: string;
    minRate: string;
    compantLogo: string;
    maxRate: string;
  };
  orderItemNo: string;
  ownerProtocolUrl: string;
  merchantInfo?: {
    infoType: string; //机构类型
    approveUrl: string; //APIB 类型，跳转的地址
  };
};

const data = ref<OrderRes>();
watch(data, () => {
  protocolTabs.value = '0';
});

const initData = async () => {
  if (!resultNo.value) return;
  const toast = showLoadingToast({
    message: '加载中...',
    forbidClick: true,
    duration: 0,
  });
  const res = await getOrderInfoApi<OrderRes>({ orderNo: resultNo.value });
  data.value = res.data;
  toast.close();
};

initData();

const submitHandler = async () => {
  if (!resultNo.value) return;
  const toast = showLoadingToast({
    message: '申请中...',
    forbidClick: true,
    duration: 0,
  });
  try {
    const res = await approveToPushApi<{ redirectUrl: string }>({ resultNo: resultNo.value });
    toast.close();
    if (res.data.redirectUrl) {
      return window.location.href = res.data.redirectUrl;
    }
  } catch (error) {
    console.error(error);
  }
  toast.close();
  if (data.value?.merchantInfo?.infoType === 'APIB') {
    window.location.href = data.value.merchantInfo.approveUrl;
    return;
  }
  router.replace({path: 'evaluateAuth', query: {...route.query,}})
};
</script>

<style lang="scss" scoped>
.text-line{
  position: relative;
  &::after{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0.22em;
    width: 100%;
    height: 25%;
    z-index: 0;
    background-color: #FFAD13;
  }
  span{
    position: relative;
    z-index: 1;
  }
}
.box-content{
  background-color: #fff;
  border-top-right-radius: 12px;
  border-top-left-radius: 12px;
}

.box-bg{
  background-color: #FFF4E7;
}

.submit-btn {
  background: #FFAD13;
  color: #fff;
  cursor: pointer;
  border-radius: 99999px;
  width: 90%;
  font-weight: bold;
  font-size: 15px;
  min-height: 40px;
  padding: 12px !important;
  position: relative;
  .pointer {
    position: absolute;
    right: calc(23% - 22px);
    top: 52%;
    z-index: 1;
    img {
      position: relative;
      z-index: 1;
    }
    .white-point {
      position: absolute;
      z-index: 0;
      background-color: rgba($color: #fff, $alpha: 0.4);
      border-radius: 9999px;
      $side: 14px;
      left: calc(-#{$side} / 2 + 1px);
      top: calc(-#{$side} / 2 + 1px);
      width: $side;
      height: $side;
      display: grid;
      place-content: center;
      .white-point-in {
        background-color: rgba($color: #fff, $alpha: 0.8);
        border-radius: 9999px;
        $side-in: 6px;
        width: $side-in;
        height: $side-in;
      }
    }
  }
}

@mixin box-white-r {
  border-radius: 10px;
  background-size: 100% auto;
  background-repeat: no-repeat;
  overflow: hidden;
  position: relative;
  z-index: 1;
  &::after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    background-color: #FFF4E7;
    top: 40px;
    height: 100%;
    z-index: 0;
    left: 0;
  }
  .content {
    position: relative;
    z-index: 1;
  }
}
.box-white-r1 {
  background: #FFF4E7;
  @include box-white-r();
}

.box-white-r2 {
  background: #FFF4E7;
  @include box-white-r();
}
.box-tag {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row;
  gap: 8px;
  .box-py {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .box-item{
    width: 100%;
    border-radius: 8px;
    position: relative;
    div{
      z-index: 1;
      position: relative;
    }
    .box-img{
      position: absolute;
      right: 20px;
      bottom: 0;
      z-index: 0;
    }
  }
  .box-item1{
    background: linear-gradient(90deg, rgba(255,173,19,1) 0%, rgba(255,214,43,1) 100%);
  }
  .box-item2{
    background: linear-gradient(90deg, #FF8854 0%, #FFB270 100%);
  }

}
.box-bg-linear {
  background: linear-gradient(90deg, rgba(255, 249, 232, 1) 0%, rgba(255, 232, 174, 1) 100%);
  position: relative;
  .tip-img {
    position: absolute;
    $height: 36px;
    height: $height;
    width: 1.17647 * $height;
    background-size: 100% 100%;
    right: 10px;
    bottom: 0;
  }
}

.approve-page {
  background-image: url(src/assets/images/approve/bg.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
}
.header {
  position: relative;
  z-index: 1;
  max-width: 100vw;
}
</style>
